<template>
	<div class="toolbar-container">
		<div class="left-toolbar">
			<el-button type="text" :disabled="undoDisabled" :title="$t('designer.toolbar.undoHint')" @click="undoHistory">
				<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
					<sc-icon-undo style="height: 1.1em;width: 1.1em"/>
				</el-icon>
			</el-button>
			<el-button type="text" :disabled="redoDisabled" :title="$t('designer.toolbar.redoHint')" @click="redoHistory">
				<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
					<sc-icon-redo style="height: 1.1em;width: 1.1em"/>
				</el-icon>
			</el-button>
			<el-button-group style="margin-left: 20px">
				<el-button :type="layoutType === 'PC' ? 'info': ''" @click="changeLayoutType('PC')">
					{{ $t('designer.toolbar.pcLayout') }}
				</el-button>
				<el-button :type="layoutType === 'Pad' ? 'info': ''" @click="changeLayoutType('Pad')">
					{{ $t('designer.toolbar.padLayout') }}
				</el-button>
				<el-button :type="layoutType === 'H5' ? 'info': ''" @click="changeLayoutType('H5')">
					{{ $t('designer.toolbar.mobileLayout') }}
				</el-button>
			</el-button-group>
			<el-button style="margin-left: 20px" :title="$t('designer.toolbar.nodeTreeHint')" @click="showNodeTreeDrawer">
				<sc-icon-tree style="height: 1.1em;width: 1.1em"/>
			</el-button>
		</div>

		<el-drawer :title="$t('designer.toolbar.nodeTreeTitle')" direction="ltr" v-model="showNodeTreeDrawerFlag" :modal="true" :size="280"
				   :destroy-on-close="true" custom-class="node-tree-drawer">
			<el-tree ref="nodeTree" :data="nodeTreeData" node-key="id" default-expand-all highlight-current class="node-tree"
					 icon-class="icon-arrow-right" @node-click="onNodeTreeClick"></el-tree>
		</el-drawer>

		<div class="right-toolbar" :style="{width: toolbarWidth + 'px'}">
			<div class="right-toolbar-con">
				<el-button v-if="showToolButton('saveDesignerButton')" type="text" @click="saveFormWidget">
					<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
						<sc-icon-save style="height: 1.1em;width: 1.1em"/>
					</el-icon>
					{{ $t('designer.toolbar.save') }}
				</el-button>
				<el-button v-if="showToolButton('saveFormVersion')" type="text" @click="saveFormVersion">
					<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
						<sc-icon-version style="height: 1.1em;width: 1.1em"/>
					</el-icon>
					{{ $t('designer.toolbar.version') }}
				</el-button>
				<el-button v-if="showToolButton('clearDesignerButton')" type="text" @click="clearFormWidget">
					<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
						<el-icon-delete style="height: 1.1em;width: 1.1em"/>
					</el-icon>
					{{ $t('designer.toolbar.clear') }}
				</el-button>
				<el-button v-if="showToolButton('previewFormButton')" type="text" @click="previewForm">
					<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
						<el-icon-view style="height: 1.1em;width: 1.1em"/>
					</el-icon>
					{{ $t('designer.toolbar.preview') }}
				</el-button>
				<el-button v-if="showToolButton('importJsonButton')" type="text" @click="importJson">
					<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
						<sc-icon-download style="height: 1.1em;width: 1.1em"/>
					</el-icon>
					{{ $t('designer.toolbar.importJson') }}
				</el-button>
				<el-button v-if="showToolButton('exportJsonButton')" type="text" @click="exportJson">
					<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
						<sc-icon-upload style="height: 1.1em;width: 1.1em"/>
					</el-icon>
					{{ $t('designer.toolbar.exportJson') }}
				</el-button>
				<el-button v-if="showToolButton('exportCodeButton')" type="text" @click="exportCode">
					<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
						<sc-icon-code style="height: 1.1em;width: 1.1em"/>
					</el-icon>
					{{ $t('designer.toolbar.exportCode') }}
				</el-button>
				<el-button v-if="showToolButton('generateSFCButton')" type="text" @click="generateSFC">
					<el-icon style="vertical-align: -0.15em;height: 1.1em;width: 1.1em">
						<sc-icon-vue-sfc style="height: 1.1em;width: 1.1em"/>
					</el-icon>
					{{ $t('designer.toolbar.generateSFC') }}
				</el-button>
				<template v-for="(idx, slotName) in $slots">
					<slot :name="slotName"></slot>
				</template>
			</div>
		</div>

		<div v-if="showPreviewDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
			<el-dialog :title="$t('designer.toolbar.preview')" v-model="showPreviewDialogFlag"
					   :show-close="true" :close-on-click-modal="false" :close-on-press-escape="false" left
					   :destroy-on-close="true" :append-to-body="true" custom-class="drag-dialog small-padding-dialog" width="75%"
					   :fullscreen="(layoutType === 'H5') || (layoutType === 'Pad')">
				<div>
					<div class="form-render-wrapper" :class="[layoutType === 'H5' ? 'h5-layout' : (layoutType === 'Pad' ? 'pad-layout' : '')]">
						<VFormRender ref="preForm" :form-json="formJson" :form-data="testFormData" :preview-state="true"
									 :option-data="testOptionData" @myEmitTest="onMyEmitTest"
									 @appendButtonClick="testOnAppendButtonClick" @buttonClick="testOnButtonClick"
									 @formChange="handleFormChange">
						</VFormRender>
					</div>
				</div>
				<template #footer>
					<div class="dialog-footer">
						<el-button type="primary" @click="getFormData">{{ $t('designer.hint.getFormData') }}</el-button>
						<el-button type="primary" @click="resetForm">{{ $t('designer.hint.resetForm') }}</el-button>
						<el-button type="primary" @click="setFormDisabled">{{ $t('designer.hint.disableForm') }}</el-button>
						<el-button type="primary" @click="setFormEnabled">{{ $t('designer.hint.enableForm') }}</el-button>
						<el-button @click="showPreviewDialogFlag = false">{{ $t('designer.hint.closePreview') }}</el-button>
						<el-button v-if="false" @click="testSetFormJson">Test SFJ</el-button>
						<el-button v-if="false" @click="testSetFormData">Test SFD</el-button>
						<el-button v-if="false" @click="testReloadOptionData">Test ROD</el-button>
					</div>
				</template>
			</el-dialog>
		</div>

		<div v-if="showImportJsonDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
			<el-dialog :title="$t('designer.toolbar.importJson')" v-model="showImportJsonDialogFlag"
					   :show-close="true" custom-class="drag-dialog small-padding-dialog" :append-to-body="true" center
					   :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
				<el-alert type="info" :title="$t('designer.hint.importJsonHint')" show-icon class="alert-padding"></el-alert>
				<code-editor :mode="'json'" :readonly="false" v-model="importTemplate"></code-editor>
				<template #footer>
					<div class="dialog-footer">
						<el-button type="primary" @click="doJsonImport">
							{{ $t('designer.hint.import') }}
						</el-button>
						<el-button @click="showImportJsonDialogFlag = false">
							{{ $t('designer.hint.cancel') }}
						</el-button>
					</div>
				</template>
			</el-dialog>
		</div>

		<div v-if="showExportJsonDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
			<el-dialog :title="$t('designer.toolbar.exportJson')" v-model="showExportJsonDialogFlag"
					   :show-close="true" custom-class="drag-dialog small-padding-dialog" center
					   :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
				<code-editor :mode="'json'" :readonly="true" v-model="jsonContent"></code-editor>
				<template #footer>
					<div class="dialog-footer">
						<el-button type="primary" class="copy-json-btn" :data-clipboard-text="jsonRawContent" @click="copyFormJson">
							{{ $t('designer.hint.copyJson') }}
						</el-button>
						<el-button @click="saveFormJson">{{ $t('designer.hint.saveFormJson') }}</el-button>
						<el-button @click="showExportJsonDialogFlag = false">
							{{ $t('designer.hint.closePreview') }}
						</el-button>
					</div>
				</template>
			</el-dialog>
		</div>

		<div v-if="showExportCodeDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
			<el-dialog :title="$t('designer.toolbar.exportCode')" v-model="showExportCodeDialogFlag"
					   :show-close="true" custom-class="drag-dialog small-padding-dialog" center
					   width="65%" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
				<el-tabs type="border-card" class="no-box-shadow no-padding" v-model="activeCodeTab">
					<el-tab-pane label="Vue" name="vue">
						<code-editor :mode="'html'" :readonly="true" v-model="vueCode" :user-worker="false"></code-editor>
					</el-tab-pane>
					<el-tab-pane label="HTML" name="html">
						<code-editor :mode="'html'" :readonly="true" v-model="htmlCode" :user-worker="false"></code-editor>
					</el-tab-pane>
				</el-tabs>
				<template #footer>
					<div class="dialog-footer">
						<el-button type="primary" class="copy-vue-btn" :data-clipboard-text="vueCode" @click="copyVueCode">
							{{ $t('designer.hint.copyVueCode') }}
						</el-button>
						<el-button type="primary" class="copy-html-btn" :data-clipboard-text="htmlCode" @click="copyHtmlCode">
							{{ $t('designer.hint.copyHtmlCode') }}
						</el-button>
						<el-button @click="saveVueCode">{{ $t('designer.hint.saveVueCode') }}</el-button>
						<el-button @click="saveHtmlCode">{{ $t('designer.hint.saveHtmlCode') }}</el-button>
						<el-button @click="showExportCodeDialogFlag = false">
							{{ $t('designer.hint.closePreview') }}
						</el-button>
					</div>
				</template>
			</el-dialog>
		</div>

		<div v-if="showFormDataDialogFlag" class="" v-drag="['.nested-drag-dialog.el-dialog', '.nested-drag-dialog .el-dialog__header']">
			<el-dialog :title="$t('designer.hint.exportFormData')" v-model="showFormDataDialogFlag"
					   :show-close="true" custom-class="nested-drag-dialog dialog-title-light-bg" center
					   :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true"
					   :append-to-body="true">
				<div style="border: 1px solid #DCDFE6">
					<code-editor :mode="'json'" :readonly="true" v-model="formDataJson"></code-editor>
				</div>
				<template #footer>
					<div class="dialog-footer">
						<el-button type="primary" class="copy-form-data-json-btn" :data-clipboard-text="formDataRawJson" @click="copyFormDataJson">
							{{ $t('designer.hint.copyFormData') }}
						</el-button>
						<el-button @click="saveFormData">{{ $t('designer.hint.saveFormData') }}</el-button>
						<el-button @click="showFormDataDialogFlag = false">
							{{ $t('designer.hint.closePreview') }}
						</el-button>
					</div>
				</template>
			</el-dialog>
		</div>

		<div v-if="showExportSFCDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
			<el-dialog :title="$t('designer.toolbar.generateSFC')" v-model="showExportSFCDialogFlag"
					   v-if="showExportSFCDialogFlag" :show-close="true" custom-class="drag-dialog small-padding-dialog" center
					   width="65%" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
				<el-tabs type="border-card" class="no-box-shadow no-padding" v-model="activeSFCTab">
					<el-tab-pane label="Vue2" name="vue2">
						<code-editor :mode="'html'" :readonly="true" v-model="sfcCode" :user-worker="false"></code-editor>
					</el-tab-pane>
					<el-tab-pane label="Vue3" name="vue3">
						<code-editor :mode="'html'" :readonly="true" v-model="sfcCodeV3" :user-worker="false"></code-editor>
					</el-tab-pane>
				</el-tabs>
				<template #footer>
					<div class="dialog-footer">
						<el-button type="primary" class="copy-vue2-sfc-btn" :data-clipboard-text="sfcCode" @click="copyV2SFC">
							{{ $t('designer.hint.copyVue2SFC') }}
						</el-button>
						<el-button type="primary" class="copy-vue3-sfc-btn" :data-clipboard-text="sfcCodeV3" @click="copyV3SFC">
							{{ $t('designer.hint.copyVue3SFC') }}
						</el-button>
						<el-button @click="saveV2SFC">{{ $t('designer.hint.saveVue2SFC') }}</el-button>
						<el-button @click="saveV3SFC">{{ $t('designer.hint.saveVue3SFC') }}</el-button>
						<el-button @click="showExportSFCDialogFlag = false">
							{{ $t('designer.hint.closePreview') }}
						</el-button>
					</div>
				</template>
			</el-dialog>
		</div>
	</div>
	<version-dialog v-if="dialog.version" ref="versionDialog" @closed="dialog.version=false" :form-id="designer.formId"></version-dialog>
</template>

<script>
import VFormRender from '@/components/designer/form-render/index'
import CodeEditor from '@/components/designer/code-editor/index'
import Clipboard from 'clipboard'
import {deepClone, copyToClipboard, generateId, getQueryParam, traverseAllWidgets, addWindowResizeHandler} from "@/utils/util"
import {generateCode} from "@/utils/code-generator"
import {genSFC} from "@/utils/sfc-generator"
import loadBeautifier from "@/utils/beautifierLoader"
import {saveAs} from 'file-saver'
import VersionDialog from "@/components/designer/form-designer/toolbar-panel/versionDialog";

export default {
	name: "ToolbarPanel",
	mixins: [],
	components: {
		VersionDialog,
		VFormRender,
		CodeEditor,
		Clipboard,
	},
	props: {
		designer: Object
	},
	inject: ['getDesignerConfig'],
	data() {
		return {
			dialog:{
				version:false,
			},
			designerConfig: this.getDesignerConfig(),
			toolbarWidth: 600,
			showPreviewDialogFlag: false,
			showImportJsonDialogFlag: false,
			showExportJsonDialogFlag: false,
			showExportCodeDialogFlag: false,
			showFormDataDialogFlag: false,
			showExportSFCDialogFlag: false,
			showNodeTreeDrawerFlag: false,

			nodeTreeData: [],

			importTemplate: '',
			jsonContent: '',
			jsonRawContent: '',

			formDataJson: '',
			formDataRawJson: '',

			vueCode: '',
			htmlCode: '',

			sfcCode: '',
			sfcCodeV3: '',

			activeCodeTab: 'vue',
			activeSFCTab: 'vue2',

			testFormData: {
				// 'userName': '666888',
				// 'productItems': [
				//   {'pName': 'iPhone12', 'pNum': 10},
				//   {'pName': 'P50', 'pNum': 16},
				// ]

				'select62173': 2,
			},
			testOptionData: {
				'select62173': [
					{label: '01', value: 1},
					{label: '22', value: 2},
					{label: '333', value: 3},
				],

				'select001': [
					{label: '辣椒', value: 1},
					{label: '菠萝', value: 2},
					{label: '丑橘子', value: 3},
				],
			},

		}
	},
	computed: {
		formJson() {
			return {
				// widgetList: this.designer.widgetList,
				// formConfig: this.designer.formConfig
				widgetList: deepClone(this.designer.widgetList),
				formConfig: deepClone(this.designer.formConfig)
			}
		},

		undoDisabled() {
			return !this.designer.undoEnabled()
		},

		redoDisabled() {
			return !this.designer.redoEnabled()
		},

		layoutType() {
			return this.designer.getLayoutType()
		},

	},
	watch: {
		'designer.widgetList': {
			deep: true,
			handler(val) {
				//console.log('test-----', val)
				//this.refreshNodeTree()
			}
		},

	},
	mounted() {
		let maxTBWidth = this.designerConfig.toolbarMaxWidth || 500
		let minTBWidth = this.designerConfig.toolbarMinWidth || 300
		let newTBWidth = window.innerWidth - 260 - 300 - 320 - 80
		this.toolbarWidth = (newTBWidth >= maxTBWidth ? maxTBWidth : (newTBWidth <= minTBWidth ? minTBWidth : newTBWidth))+100
		addWindowResizeHandler(() => {
			this.$nextTick(() => {
				let newTBWidth2 = window.innerWidth - 260 - 300 - 320 - 80
				this.toolbarWidth = (newTBWidth2 >= maxTBWidth ? maxTBWidth : (newTBWidth2 <= minTBWidth ? minTBWidth : newTBWidth2))+100
			})
		})
	},
	methods: {
		showToolButton(configName) {
			if (this.designerConfig[configName] === undefined) {
				return true
			}
			return !!this.designerConfig[configName]
		},

		buildTreeNodeOfWidget(widget, treeNode) {
			let curNode = {
				id: widget.id,
				label: widget.options.label || widget.type,
				//selectable: true,
			}
			treeNode.push(curNode)

			if (widget.category === undefined) {
				return
			}

			curNode.children = []
			if (widget.type === 'grid') {
				widget.cols.map(col => {
					let colNode = {
						id: col.id,
						label: col.options.name || widget.type,
						children: []
					}
					curNode.children.push(colNode)
					col.widgetList.map(wChild => {
						this.buildTreeNodeOfWidget(wChild, colNode.children)
					})
				})
			} else if (widget.type === 'table') {
				//TODO: 需要考虑合并单元格！！
				widget.rows.map(row => {
					let rowNode = {
						id: row.id,
						label: 'table-row',
						selectable: false,
						children: [],
					}
					curNode.children.push(rowNode)

					row.cols.map(cell => {
						if (cell.merged) {  //跳过合并单元格！！
							return
						}

						let rowChildren = rowNode.children
						let cellNode = {
							id: cell.id,
							label: 'table-cell',
							children: []
						}
						rowChildren.push(cellNode)

						cell.widgetList.map(wChild => {
							this.buildTreeNodeOfWidget(wChild, cellNode.children)
						})
					})
				})
			} else if (widget.type === 'tab') {
				widget.tabs.map(tab => {
					let tabNode = {
						id: tab.id,
						label: tab.options.name || widget.type,
						selectable: false,
						children: []
					}
					curNode.children.push(tabNode)
					tab.widgetList.map(wChild => {
						this.buildTreeNodeOfWidget(wChild, tabNode.children)
					})
				})
			} else if (widget.type === 'sub-form') {
				widget.widgetList.map(wChild => {
					this.buildTreeNodeOfWidget(wChild, curNode.children)
				})
			} else if (widget.category === 'container') {  //自定义容器
				widget.widgetList.map(wChild => {
					this.buildTreeNodeOfWidget(wChild, curNode.children)
				})
			}
		},

		refreshNodeTree() {
			this.nodeTreeData.length = 0
			this.designer.widgetList.forEach(wItem => {
				this.buildTreeNodeOfWidget(wItem, this.nodeTreeData)
			})
		},

		showNodeTreeDrawer() {
			this.refreshNodeTree()
			this.showNodeTreeDrawerFlag = true
			this.$nextTick(() => {
				if (this.designer.selectedId) {  //同步当前选中组件到节点树！！！
					this.$refs.nodeTree.setCurrentKey(this.designer.selectedId)
				}
			})
		},

		undoHistory() {
			this.designer.undoHistoryStep()
		},

		redoHistory() {
			this.designer.redoHistoryStep()
		},

		changeLayoutType(newType) {
			this.designer.changeLayoutType(newType)
		},

		clearFormWidget() {
			this.designer.clearDesigner()
		},
		async saveFormVersion()
		{
			this.dialog.version = true
			this.$nextTick(() => {
				this.$refs.versionDialog.open();
			})
		},
		async saveFormWidget() {
			let formId = deepClone(this.designer.formId)
			let widgetList = deepClone(this.designer.widgetList)
			let formConfig = deepClone(this.designer.formConfig)
			var params={
				formId:formId,
				widgetList:JSON.stringify(widgetList),
				formConfig:JSON.stringify(formConfig)
			}
			var res = await this.$API.bpm.bpmForm.updateFormJsonBpmForm.post(params);
			if(res.code == 200){
				this.$message.success("操作成功")
			}else{
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		previewForm() {
			this.showPreviewDialogFlag = true
		},

		saveAsFile(fileContent, defaultFileName) {
			this.$prompt(this.$t('designer.hint.fileNameForSave'), this.$t('designer.hint.saveFileTitle'), {
				inputValue: defaultFileName,
				closeOnClickModal: false,
				inputPlaceholder: this.$t('designer.hint.fileNameInputPlaceholder')
			}).then(({value}) => {
				if (!value) {
					value = defaultFileName
				}

				if (getQueryParam('vscode') == 1) {
					this.vsSaveFile(value, fileContent)
					return
				}

				const fileBlob = new Blob([fileContent], {type: 'text/plain;charset=utf-8'})
				saveAs(fileBlob, value)
			}).catch(() => {
				//
			})
		},

		vsSaveFile(fileName, fileContent) {
			const msgObj = {
				cmd: 'writeFile',
				data: {
					fileName,
					code: fileContent
				}
			}
			window.parent.postMessage(msgObj, '*')
		},

		importJson() {
			this.importTemplate = JSON.stringify(this.designer.getImportTemplate(), null, '  ')
			this.showImportJsonDialogFlag = true
		},

		doJsonImport() {
			try {
				let importObj = JSON.parse(this.importTemplate)
				//console.log('test import', this.importTemplate)
				if (!importObj || !importObj.formConfig) {
					throw new Error(this.$t('designer.hint.invalidJsonFormat'))
				}

				let fJsonVer = importObj.formConfig.jsonVersion
				if (!fJsonVer || (fJsonVer !== 3)) {
					throw new Error(this.$t('designer.hint.jsonVersionMismatch'))
				}

				this.designer.loadFormJson(importObj)

				this.showImportJsonDialogFlag = false
				this.$message.success(this.$t('designer.hint.importJsonSuccess'))

				this.designer.emitHistoryChange()

				this.designer.emitEvent('form-json-imported', [])
			} catch (ex) {
				this.$message.error(ex + '')
			}
		},

		exportJson() {
			let widgetList = deepClone(this.designer.widgetList)
			let formConfig = deepClone(this.designer.formConfig)
			this.jsonContent = JSON.stringify({widgetList, formConfig}, null, '  ')
			this.jsonRawContent = JSON.stringify({widgetList, formConfig})
			this.showExportJsonDialogFlag = true
		},

		copyFormJson(e) {
			copyToClipboard(this.jsonRawContent, e,
				this.$message,
				this.$t('designer.hint.copyJsonSuccess'),
				this.$t('designer.hint.copyJsonFail')
			)
		},

		saveFormJson() {
			this.saveAsFile(this.jsonContent, `vform${generateId()}.json`)
		},

		exportCode() {
			this.vueCode = generateCode(this.formJson)
			this.htmlCode = generateCode(this.formJson, 'html')
			this.showExportCodeDialogFlag = true
		},

		copyVueCode(e) {
			copyToClipboard(this.vueCode, e,
				this.$message,
				this.$t('designer.hint.copyVueCodeSuccess'),
				this.$t('designer.hint.copyVueCodeFail')
			)
		},

		copyHtmlCode(e) {
			copyToClipboard(this.htmlCode, e,
				this.$message,
				this.$t('designer.hint.copyHtmlCodeSuccess'),
				this.$t('designer.hint.copyHtmlCodeFail')
			)
		},

		saveVueCode() {
			this.saveAsFile(this.vueCode, `vform${generateId()}.vue`)
		},

		saveHtmlCode() {
			this.saveAsFile(this.htmlCode, `vform${generateId()}.html`)
		},

		generateSFC() {
			loadBeautifier(beautifier => {
				this.sfcCode = genSFC(this.designer.formConfig, this.designer.widgetList, beautifier)
				this.sfcCodeV3 = genSFC(this.designer.formConfig, this.designer.widgetList, beautifier, true)
				this.showExportSFCDialogFlag = true
			})
		},

		copyV2SFC(e) {
			copyToClipboard(this.sfcCode, e,
				this.$message,
				this.$t('designer.hint.copySFCSuccess'),
				this.$t('designer.hint.copySFCFail')
			)
		},

		copyV3SFC(e) {
			copyToClipboard(this.sfcCodeV3, e,
				this.$message,
				this.$t('designer.hint.copySFCSuccess'),
				this.$t('designer.hint.copySFCFail')
			)
		},

		saveV2SFC() {
			this.saveAsFile(this.sfcCode, `vformV2-${generateId()}.vue`)
		},

		saveV3SFC() {
			this.saveAsFile(this.sfcCodeV3, `vformV3-${generateId()}.vue`)
		},

		getFormData() {
			this.$refs['preForm'].getFormData().then(formData => {
				this.formDataJson = JSON.stringify(formData, null, '  ')
				this.formDataRawJson = JSON.stringify(formData)

				this.showFormDataDialogFlag = true
			}).catch(error => {
				this.$message.error(error)
			})
		},

		copyFormDataJson(e) {
			copyToClipboard(this.formDataRawJson, e,
				this.$message,
				this.$t('designer.hint.copyJsonSuccess'),
				this.$t('designer.hint.copyJsonFail')
			)
		},

		saveFormData() {
			this.saveAsFile(this.htmlCode, `formData${generateId()}.json`)
		},

		resetForm() {
			this.$refs['preForm'].resetForm()
		},

		setFormDisabled() {
			this.$refs['preForm'].disableForm()
		},

		setFormEnabled() {
			this.$refs['preForm'].enableForm()
		},
		testSetFormJson() {
			let newFormJson = {

			}
			this.$refs.preForm.setFormJson(newFormJson)
			this.$nextTick(() => {
				this.$refs.preForm.setFormData(newFormJson)
			})
		},

		testSetFormData() {
			let testFD = {
				"input89263": "899668"
			}
			this.$refs.preForm.setFormData(testFD)
		},

		testReloadOptionData() {
			this.testOptionData['select001'].push({
				label: 'aaa',
				value: 888
			})

			this.$refs.preForm.reloadOptionData()
		},

		handleFormChange(fieldName, newValue, oldValue, formModel) {
			/*
			console.log('---formChange start---')
			console.log('fieldName', fieldName)
			console.log('newValue', newValue)
			console.log('oldValue', oldValue)
			console.log('formModel', formModel)
			console.log('---formChange end---')
			*/
			console.log('formModel', formModel)
		},

		testOnAppendButtonClick(clickedWidget) {
			console.log('test', clickedWidget)
		},

		testOnButtonClick(button) {
			console.log('test', button)
		},

		onMyEmitTest(aaa) {
			console.log('-----', aaa)
		},

		findWidgetById(wId) {
			let foundW = null
			traverseAllWidgets(this.designer.widgetList, (w) => {
				if (w.id === wId) {
					foundW = w
				}
			})

			return foundW
		},

		onNodeTreeClick(nodeData, node, nodeEl) {
			//console.log('test', JSON.stringify(nodeData))

			if ((nodeData.selectable !== undefined) && !nodeData.selectable) {
				this.$message.info(this.$t('designer.hint.currentNodeCannotBeSelected'))
			} else {
				const selectedId = nodeData.id
				const foundW = this.findWidgetById(selectedId)
				if (foundW) {
					this.designer.setSelected(foundW)
				}
			}
		},

	}
}
</script>

<style lang="scss" scoped>
div.toolbar-container {
	width: 100%;
	/* 上一行css有问题，当窗口宽度不足时会把按钮挤出到右边的属性设置区，弃之！ */
}

.left-toolbar {
	display: flex;
	margin-top: 4px;
	float: left;
	font-size: 16px;
}

.right-toolbar {
	display: flex;
	margin-top: 5px;
	float: right;
	text-align: right;
	overflow: hidden;

	.right-toolbar-con {
		text-align: right;
		width: 600px;
	}

	:deep(.el-button) {
		margin-left: 10px;
	}

	:deep(.el-button--text) {
		font-size: 14px !important;
	}
}

.el-button i {
	margin-right: 3px;
}

.small-padding-dialog {
	:deep(.el-dialog__header) {
		//padding-top: 3px;
		//padding-bottom: 3px;
		background: #f1f2f3;
	}

	:deep(.el-dialog__body) {
		padding: 12px 15px 12px 15px;

		.el-alert.alert-padding {
			padding: 0 10px;
		}
	}

	:deep(.ace-container) {
		border: 1px solid #DCDFE6;
	}
}

.dialog-title-light-bg {
	:deep(.el-dialog__header) {
		background: #f1f2f3;
	}
}

.no-box-shadow {
	box-shadow: none;
}

.no-padding.el-tabs--border-card {
	:deep(.el-tabs__content) {
		padding: 0;
	}
}

.form-render-wrapper {
	text-align: center;
	//height: calc(100vh - 142px);
	//all: revert !important; /* 防止表单继承el-dialog等外部样式，未生效，原因不明？？ */
}

.form-render-wrapper.h5-layout {
	margin: 0 auto;
	width: 420px;
	border-radius: 15px;
	text-align: center;
	//border-width: 10px;
	box-shadow: 0 0 1px 10px #495060;
	height: calc(100vh - 175px);
	overflow-y: auto;
	overflow-x: hidden;
}

.form-render-wrapper.pad-layout {
	margin: 0 auto;
	width: 960px;
	border-radius: 15px;
	//border-width: 10px;
	box-shadow: 0 0 1px 10px #495060;
	height: calc(100vh - 175px);
	overflow-y: auto;
	overflow-x: hidden;
}

.node-tree-drawer {
	:deep(.el-drawer) {
		padding: 10px;
		overflow: auto;
	}

	:deep(.el-drawer__header) {
		margin-bottom: 12px;
		padding: 5px 5px 0;
	}

	:deep(.el-drawer__body) {
		padding-left: 5px;
	}
}

/*.node-tree-scroll-bar {*/
/*  height: 100%;*/
/*  overflow: auto;*/
/*}*/

:deep(.node-tree) {
	.el-tree > .el-tree-node:after {
		border-top: none;
	}

	.el-tree-node {
		position: relative;
		padding-left: 12px;
	}

	.el-tree-node__content {
		padding-left: 0 !important;
	}

	.el-tree-node__expand-icon.is-leaf {
		display: none;
	}

	.el-tree-node__children {
		padding-left: 12px;
		overflow: visible !important; /* 加入此行让el-tree宽度自动撑开，超出宽度el-draw自动出现水平滚动条！ */
	}

	.el-tree-node :last-child:before {
		height: 38px;
	}

	.el-tree > .el-tree-node:before {
		border-left: none;
	}

	.el-tree > .el-tree-node:after {
		border-top: none;
	}

	.el-tree-node:before {
		content: "";
		left: -4px;
		position: absolute;
		right: auto;
		border-width: 1px;
	}

	.el-tree-node:after {
		content: "";
		left: -4px;
		position: absolute;
		right: auto;
		border-width: 1px;
	}

	.el-tree-node:before {
		border-left: 1px dashed #4386c6;
		bottom: 0px;
		height: 100%;
		top: -10px;
		width: 1px;
	}

	.el-tree-node:after {
		border-top: 1px dashed #4386c6;
		height: 20px;
		top: 12px;
		width: 16px;
	}

	.el-tree-node.is-current > .el-tree-node__content {
		background: #c2d6ea !important;
	}

	.el-tree-node__expand-icon {
		margin-left: -3px;
		padding: 6px 6px 6px 0px;
		font-size: 16px;
	}

}
</style>
